<script setup>
import {ref,onMounted} from 'vue'
import * as echarts from 'echarts'  // 导入echarts
import 'echarts-liquidfill'  // 导入echarts的水球图插件

let people = ref('215908人')
let charts = ref()  // 获取charts组件实例

onMounted(()=>{
    // 把传递进去的dom节点，初始化为echarts类的实例
    let mycharts = echarts.init(charts.value)
    // 设置echarts配置项
    mycharts.setOption({
        // 标题
        title:{
            text:'水球图',
            textStyle:{
                color:'#29fcff',
            },
            left:'center',
            top:'70%'
        },
        // x轴,y轴 配置
        xAxis:{},
        yAxis:{},
        // 配置要展示的图形图标，type图形类型，data数据
        series: [{
            type: 'liquidFill',
            waveAnimation: true,  // 是否开启动画
            animationDuration: 0,
            animationDurationUpdate: 0,
            data: [0.7,0.4,0.2],
            radius:'80%',
            label:{
                // 标签设置
                // position: ['50%', '30%'],
                // formatter: '50%', //显示文本,
                fontSize: '20px', //文本字号,
                // color: 'rgba(70, 254, 116, 0.91)',
            },

            outline: {
                show: true,
                borderDistance: 8,
                itemStyle: {
                    color: 'none',
                    borderColor: 'rgb(233, 255, 252)',
                    borderWidth: 8,
                    shadowBlur: 20,
                    shadowColor: 'rgba(0, 0, 0, 0.25)'
                }
            },

        }],
        // 布局配置
        grid:{left:0,right:0,top:0,bottom:0},
    })
})

</script>

<template>
    <div class="box">
        <div class="top">
            <p class="title">实时游客统计</p>
            <p class="bg"></p>
            <p class="right">可预约总量<span>9999</span>人</p>
        </div>
        
        <div class="number">
            <span v-for="(item,index) in people" :key="index">{{ item }}</span>
        </div>
        <!-- 盒子，将来用来展示echarts图形图表用的 -->
        <div class="charts" ref="charts"></div>
    </div>
</template>

<style scoped lang="scss">
.box{
    background: url('/public/img/screen/dataScreen-main-lb.png') no-repeat;
    background-size: 100% 100%;
    margin-top: 10px;
    .top{
        margin-left: 20px;
        color:white;
        // color:rgb(233, 255, 252);
        font-size: 20px;
        .title{
            
        }
        .bg{
            width: 68px;
            height: 7px;
            background: url('/public/img/screen/dataScreen-title.png') no-repeat;
            background-size: 100% 100%;
            margin-top: 10px;
        }
        .right{
            float:right;
            span{
                color: yellowgreen;
                margin: 0 10px;
            }
        }
    }


    .number{
        // background-color: red;
        margin-top: 30px;
        display: flex;
        padding: 10px;
        span{
            flex: 1;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background: url('public/img/screen/total.png') no-repeat;
            background-size: 100% 100%;
            color: #29fcff;
        }
    }
    .charts{
        width: 100%;
        height: 250px;
        // background-color: red;
    }


}
</style>